<template>
	<view class="homeLayout">
		<view class="head">
			<home-head></home-head>
		</view>
		<view class="homeBody">
			<view class="swiperContent">
				<!-- 轮播区域 -->
				<swiper vertical>
					<swiper-item v-for="(item,index) in 5">
						<view class="content">
							<view class="soupTabGroup">
								<view class="tab heart">
									<view class="icon">
										<image src="/static/images/xin-icon.png" mode="aspectFill">
										</image>
									</view>
									<view class="text">心灵鸡汤</view>
								</view>
								<view class="tab harm">
									<view class="icon">
										<image src="/static/images/du-icon.png" mode="aspectFill">
										</image>
									</view>
									<view class="text">毒鸡汤</view>
								</view>
							</view>
							<text class="main">鸡汤内容</text>
							<view class="author">
								<view class="userinfo">
									<view class="uesrPic">
										<image src="/static/images/logo.png" mode="aspectFill"></image>
									</view>
									<view class="authorname">luluge</view>
									<view class="fromWhere"></view>
								</view>
							</view>
						</view>
						<view class="info">点赞互动</view>
					</swiper-item>
				</swiper>
			</view>
			<view class="progress">
				<view class="progressLine"></view>
			</view>
		</view>
	</view>
</template>

<script setup>

</script>

<style lang="scss">
	.homeLayout {
		height: 100vh;
		background: #bde1fb;
		display: flex;
		flex-direction: column;

		.head {
			height: 26%;
		}

		.homeBody {
			flex: 1;
			background-color: #fff;
			border-radius: 50rpx 50rpx 0 0;
			overflow: hidden;

			.swiperContent {
				height: calc(100% - 10rpx);
				swiper {
					height: 100%;
					&-item {
						.content {
							height: calc(100% - 130rpx);
							display: flex;
							flex-direction: column;
							justify-content: center;
							padding: 0 30rpx;
							.soupTabGroup{
								.tab{
									height: 56rpx;
									width: fit-content;
									background-color: #aaa;
									display: flex;
									align-items: center;
									font-size: 36rpx;
									font-weight: 400;
									gap: 10rpx;
									padding: 0 20rpx;
									border-radius: 56rpx;
									.icon{
										display:flex;
										width: 40rpx;
										aspect-ratio: 1;
										border-radius: 50%;
										image{
											width: 100%;
											height:100%;
										}
									}
								}
								.heart{
									background-color: #fff3f7;
									.icon{
										background: linear-gradient(to right,#f83162,#ff7795);
									}
								}
								.harm{
									background-color: #edfdf0;
									.icon{
										background: linear-gradient(to right,#4f9153,#4bbb8b);
									}
								}
							}
							.author{
								.userinfo{
									.uesrPic{
										display: flex;
										justify-content: center;
										align-items: center;
										width: 60rpx;
										height: 60rpx;
										image{
											width: 100%;
											height: 100%;
										}
									}
								}
							}
						}

						.info {
							height: 130rpx;
							border: 1rpx solid black;
							display: flex;
							align-items: center;
							justify-content: space-between;
						}
					}
				}
			}

			.progress {
				width: 100%;
				height: 10rpx;
				background: #eee;

				.progressLine {
					height: 100%;
					width: 50%;
					background: linear-gradient(to right, #bce0fd, #74dbef);
				}
			}
		}
	}
</style>